<template>
  <div class="settings-container">
    <n-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h1>系统设置</h1>
        </div>
      </template>
      
      <div class="settings-layout">
        <div class="settings-sidebar">
          <n-menu
            v-model:value="activeKey"
            :options="menuOptions"
            @update:value="handleMenuUpdate"
          />
        </div>
        
        <div class="settings-content">
          <router-view />
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { h, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NCard, NMenu, NIcon } from 'naive-ui'
import { 
  SettingsOutline, 
  SpeedometerOutline, 
  CloudOutline, 
  DesktopOutline 
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()

// 当前选中的菜单项
const activeKey = ref('general')

// 菜单选项
const menuOptions = [
  {
    label: '通用设置',
    key: 'general',
    icon: renderIcon(SettingsOutline)
  },
  {
    label: '性能设置',
    key: 'performance',
    icon: renderIcon(SpeedometerOutline)
  },
  {
    label: '云同步设置',
    key: 'cloud',
    icon: renderIcon(CloudOutline)
  },
  {
    label: '桌面应用设置',
    key: 'electron',
    icon: renderIcon(DesktopOutline)
  }
]

// 渲染图标
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

// 处理菜单更新
function handleMenuUpdate(key: string) {
  router.push(`/settings/${key}`)
}

// 从路由中获取当前活动页
onMounted(() => {
  const path = route.path
  const segments = path.split('/')
  if (segments.length > 2) {
    activeKey.value = segments[2]
  } else {
    // 默认导航到通用设置
    router.push('/settings/general')
  }
})
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
  
  .settings-card {
    min-height: calc(100vh - 40px);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h1 {
        margin: 0;
        font-size: 24px;
      }
    }
  }
  
  .settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    
    .settings-sidebar {
      border-right: 1px solid var(--border-color);
      padding-right: 20px;
    }
    
    .settings-content {
      min-height: 500px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
    
    .settings-layout {
      grid-template-columns: 1fr;
      
      .settings-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 16px;
        margin-bottom: 16px;
      }
    }
  }
}
</style> 